<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<div>
			<headerOpreate style="padding-bottom: 2px;float: left;margin-right: 10px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<el-dropdown style="margin-top: 1px" split-button size="small" type="primary" @command="handleExportExcel">
				导出表格
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="1">
						<i class="el-icon-eleg-icon_table el-icon--left"></i>导出当前
					</el-dropdown-item>
					<el-dropdown-item command="2">
						<i class="el-icon-eleg-icon_table el-icon--left"></i>导出全部
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<el-row style="width: 100%;padding-top: 5px;padding-bottom: 5px">
			<el-col :span="14">
				<div class="query" style="padding-top: 2px;display:inline">
					<div style="float: left">
						<span style="font-size: 13px;font-weight: bold">馆藏地</span>
						<el-select size="small" v-model="location" placeholder="暂无数据" style="width: 120px;margin-right: 5px" @change="selectLocation">
							<el-option v-for="item in locationDatas" :key="item.LocationKeyId" :label="item.Name" :value="item.LocationKeyId">
							</el-option>
						</el-select>
						</el-cascader>
					</div>
					<div style="padding-left: 3px">
						<span style="font-size: 13px;font-weight: bold">检索字段</span>
						<el-select size="small" v-model="value" placeholder="请选择查询方式" style="width: 100px;margin-right: 2px" @change="selectType">
							<el-option label="姓名" :value="0"></el-option>
							<el-option label="卡号" :value="1"></el-option>
							<el-option label="标签" :value="2"></el-option>
							<el-option label="角色" :value="3"></el-option>
						</el-select>
						<span style="font-size: 13px;font-weight: bold">关键字</span>
						<el-autocomplete size="small" style="width: 160px;" class="inline-input" v-model="searchModel" :fetch-suggestions="querySearch" :placeholder="contentHint" @select="handleSelect">
							<el-button id="searchData" slot="append" icon="search" @click="searchDatas"></el-button>
						</el-autocomplete>
					</div>
				</div>
			</el-col>
			<el-col :span="10">
				<div style="text-align: right">
					<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
					<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
					<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
					<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
				</div>
			</el-col>
		</el-row>
		<div>
			<div style="float: left">
				<span style="font-size: 13px;font-weight: bold">借阅次数排序</span>
				<el-select size="small" v-model="rank" :placeholder="$t('message.selectModeAlert')" style="width: 100px;" @change="selectRank">
					<el-option label="降序" :value="1"></el-option>
					<el-option label="升序" :value="2"></el-option>
				</el-select>
			</div>
			<div class="block" style="text-align:right;padding-bottom: 2px;">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="selection" align="center" width="50px"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" align="center" v-if="showUpdate" width="100">
				<template slot-scope="scope">
					<i v-if="scope.row.update" class="el-icon-loading" style="font-size: 20px"></i>
					<div v-else>
						<el-tag v-if="scope.row.IsUpdated == '1'" type="success">更新成功</el-tag>
						<el-tag v-if="scope.row.IsUpdated == '2'" type="danger">更新失败</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="姓名" align="center" prop="name"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="卡号" align="center" prop="code"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="标签" align="center" prop="tag"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="人脸信息" align="center">
				<template slot-scope="scope">
					<el-tag v-if="!scope.row.isFeatureExist" type="danger">未注册</el-tag>
					<a v-else style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="getFeatureInfo(scope.row)">查看</a>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="角色" align="center" prop="type"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="借阅期限" align="center" prop="borrowdaylimit"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="在借信息" align="center">
				<template slot-scope="scope">
					<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="showHoldBooks(scope.row)">{{scope.row.holdcount}}</a>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="借阅次数" align="center" prop="count"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center" width="220px">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="borrow(scope.row)"><i class="el-icon-eleg-icon_menu-square_alt2 el-icon--left"></i><br />借阅记录</el-button>
					<el-button type="primary" size="mini" @click="goLocation(scope.row)"><i class="el-icon-eleg-icon_pin el-icon--left"></i><br />馆藏地</el-button>
					<el-button type="primary" size="mini" @click="editTag(scope.row)"><i class="el-icon-edit el-icon--left"></i><br />修改标签</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 1px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 修改读者标签 -->
		<el-dialog title="修改读者标签" v-model="editTagDialog" :class="[dialog-small-width]">
			<el-form id="form" ref="editTagForm" :model="editTagForm" :rules="editTagRules" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input disabled v-model="editTagForm.name" style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="卡号" prop="code">
					<el-input disabled v-model="editTagForm.code" style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="tag">
					<el-input v-model="editTagForm.tag" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editTagDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmEditTag('editTagForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 查看逾期图书列表 -->
		<el-dialog title="逾期图书列表" v-model="overdueBooksDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 5px">
				<span>逾期图书：{{overdueCount}}册</span>
				<span style="margin-left: 20px">逾期上限：{{overdueLimit}}册</span>
			</div>
			<el-table border style="width: 100%;" :data="overdueBooksData">
				<el-table-column :show-overflow-tooltip="true" type="index"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="书名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="作者" align="center" prop="author"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="出版社" align="center" prop="press"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="借阅时间" align="center" prop="borrowtime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="到期时间" align="center" prop="duetime"></el-table-column>
			</el-table>
		</el-dialog>
		<!-- 查看欠费图书列表 -->
		<el-dialog title="欠费信息" v-model="chargedBooksDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 5px">
				<span>当前欠费：{{chargedCount}}</span>
				<span style="margin-left: 20px">欠费上限：{{chargedLimit}}</span>
			</div>
			<el-table border style="width: 100%;" :data="chargedBooksData">
				<el-table-column :show-overflow-tooltip="true" type="index"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="书名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="作者" align="center" prop="author"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="出版社" align="center" prop="press"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="借阅时间" align="center" prop="borrowtime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="到期时间" align="center" prop="duetime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="还书时间" align="center" prop="returntime"></el-table-column>
			</el-table>
		</el-dialog>
		<!-- 当前借书列表 -->
		<el-dialog title="在借信息" v-model="holdBooksDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 5px">
				<span>在借图书：{{holdCount}}册</span>
				<span style="margin-left: 20px">借书上限：{{holdLimit}}册</span>
			</div>
			<el-table border style="width: 100%;" :data="holdBooksData">
				<el-table-column :show-overflow-tooltip="true" type="index"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="书名" align="center" prop="Name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="条码" align="center" prop="BookBarcode"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="标签" align="center" prop="RFIDTag"></el-table-column>
				<!-- <el-table-column :show-overflow-tooltip="true" label="作者" align="center" prop="Author"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="出版社" align="center" prop="Press"></el-table-column> -->
				<!-- <el-table-column :show-overflow-tooltip="true" label="馆藏地" align="center" prop="Location"></el-table-column> -->
				<el-table-column :show-overflow-tooltip="true" label="借书时间" align="center" prop="BorrowTime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="到期时间" align="center" prop="DueTime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.IsOverDue" type="danger">超期</el-tag>
						<el-tag v-else type="success">正常</el-tag>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="是否异常" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.IsException" type="danger">是</el-tag>
						<el-tag v-else type="success">否</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right;padding-bottom: 3px">
				<el-pagination @size-change="handleHoldSizeChange" @current-change="handleHoldCurrentChange" :current-page="currentHoldPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="holdPageSize" layout="total, sizes,prev, pager, next, jumper" :total="holdTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<!--导入excel-->
		<el-dialog title="导入读者Excel" v-model="importExcelDialog" :class="[dialog-small-width]">
			<div style="width:360px;margin:auto">
				<div style="width: 100%;padding-bottom: 5px">
					<label>馆藏地</label>
					<el-select size="small" v-model="importLocaitionId" :placeholder="$t('message.selectModeAlert')" style="width: 45%;margin-right: 2px">
						<el-option v-for="item in importLocationDatas" :key="item.LocationKeyId" :label="item.Name" :value="item.LocationKeyId">
						</el-option>
					</el-select>
				</div>
				<uploadSection v-if="importExcelDialog" ref="importSection" :band-id="importLocaitionId" :file-type="fileType" :upload-url="uplodaUrl" :accept-types="acceptTypes" v-on:uploadComplete="uploadComplete" :usage="'2'" :control-obj="ControlObj"></uploadSection>
			</div>
		</el-dialog>
		<!-- 当前借书列表 -->
		<el-dialog title="重置密码" v-model="showresetPwd" :class="[dialog-mini-width]">
			<div>
				<div style="margin-bottom: 20px;">
					<label>重置方式</label>&#x3000;
					<el-select size="small" v-model="resetPwdType" style="width: 184px;">
						<el-option label="按选中的读者" value="reader"></el-option>
						<el-option label="按馆藏地" value="location"></el-option>
					</el-select>
				</div>
				<div style="margin-bottom: 20px;" v-if="resetPwdType === 'location'">
					<label>馆藏地</label>&#x3000;
					<el-select size="small" v-model="resetPwdLocationId" style="width: 200px;">
						<el-option v-for="item in importLocationDatas" :key="item.LocationKeyId" :label="item.Name" :value="item.LocationKeyId"></el-option>
					</el-select>
				</div>
				<div style="margin-bottom: 20px;">
					<label>密码</label>&#x3000;
					<el-input v-model="resetPwd" style="width: 216px;" size="small"></el-input>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="showresetPwd = false">取 消</el-button>
					<el-button type="primary" @click="confirmResetPassword">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import uploadSection from '../../../../components/import'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate,
			uploadSection
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchData").click(); //调用登录按钮的登录事件
				}
			};
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			//修改标签正则判断
			var create_checkTag = (rule, value, callback) => {
				if(this.editTagForm.tag === '') {
					callback(new Error('读者标签不能为空'));
				} else if((/.*[\u4e00-\u9fa5]+.*$/).test(this.editTagForm.tag)) {
					callback(new Error('读者标签中不能存在中文'));
				} else {
					callback();
				}
			};
			return {
				flag: false, //馆藏地下拉框标示位，避免组件初始化调用change事件
				flag2: false, //排序下拉框标示位，避免组件初始化调用change事件
				isReload: false,
				importExcelDialog: false,
				importLocaitionId: 0,
				resetPwdType: 'reader',
				resetPwdLocationId: null,
				importLocationDatas: [],
				importForm: {},
				uplodaUrl: '/Api/User/File/ExcelImport',
				acceptTypes: 'xls,xlsx',
				ControlObj: {},
				fileType: 1,
				currentNodeKey: null,
				locationDatas: [],
				location: null,
				rank: 1, //借阅量顺序
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				readerCode: '',
				loading: false,
				contentHint: '读者姓名 查询',
				value: 0, //搜索
				searchModel: '',
				searchReaderHistory: [],
				searchitem: {},
				showUpdate: false,
				// bookData:[],
				chargedBooksData: [],
				chargedCount: 0,
				chargedLimit: 0,
				holdBooksData: [],
				holdCount: 0,
				holdLimit: 0,
				overdueBooksData: [],
				overdueCount: 0,
				overdueLimit: 0,
				overdueBooksDialog: false,
				chargedBooksDialog: false,
				holdBooksDialog: false,
				data: [],
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				currentHoldPage: 1,
				holdPageSize: 10,
				holdTotalSize: 0,

				//修改标签
				editTagDialog: false,
				editTagForm: {

				},
				editTagRules: {
					tag: [{
						validator: create_checkTag,
						required: true,
						trigger: 'blur'
					}],
				},
				showresetPwd: false,
				resetPwd: '',
				opreateDatas: [{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: this.$t("message.refresh"),
						action: 'reloadDatas'
					},
					{
						show: true,
						size: 'small',
						type: 'primary',
						icon: 'el-icon-eleg-icon_lock_alt el-icon--left',
						name: '重置密码',
						action: 'resetPassword'
					},
					{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_cloud-download el-icon--left',
						name: '更新',
						action: 'multipleUpdateReader'
					},
					{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_folder_download el-icon--left',
						name: '下载模板',
						action: 'downloadExcel'
					},
					{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_folder_upload el-icon--left',
						name: '导入',
						action: 'importExcel'
					},
					{
						type: 'danger',
						size: 'small',
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "multipleDeleteReader"
					}
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//导出表格
			handleExportExcel(command) {
				if(command === '1') {
					this.exportExcel();
				} else {
					this.exportAll();
				}
			},
			//导出表格
			exportExcel() {　　　　　　
				require.ensure([], () => {　　　　　　　　
					const {
						export_json_to_excel
					} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
					const tHeader = ['读者姓名', '身份', '读者证号', '读者标签', '借阅量(册)', '在借图书(册)', '超期图书(册)', '欠费(元)', '备注'];　　　　　　　　
					const filterVal = ['name', 'type', 'code', 'tag', 'count', 'holdcount', 'overduecount', 'chargedcount', ''];
					const list = this.tableData;　　　　　　　　
					const data = this.formatJson(filterVal, list);　
					var beginTime = new Date(this.startTime).format('yyyy-MM-dd');
					var overTime = new Date(this.endTime).format('yyyy-MM-dd');　　　　　　　
					export_json_to_excel(tHeader, data, beginTime + '至' + overTime + '读者信息');　　　　　　
				})　　　
			},
			exportAll() {
				var param = {
					name: this.value === 0 ? this.searchModel : '',
					code: this.value === 1 ? this.searchModel : '',
					tag: this.value === 2 ? this.searchModel : '',
					type: this.value === 3 ? this.searchModel : '',
					queryid: this.location,
					index: 0,
					pagesize: 0,
					begin: this.startTime,
					end: this.endTime,
					order: this.rank
				}
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/Reader/Info', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						require.ensure([], () => {　　　　　　　　
							const {
								export_json_to_excel
							} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
							const tHeader = ['读者姓名', '身份', '读者证号', '读者标签', '借阅量(册)', '在借图书(册)', '超期图书(册)', '欠费(元)', '备注'];　　　　　　　
							const filterVal = ['name', 'type', 'code', 'tag', 'count', 'holdcount', 'overduecount', 'chargedcount', ''];　　　　　　　
							const list = response.data.info;　　　　　　　　
							const data = this.formatJson(filterVal, list);　
							var beginTime = new Date(this.startTime).format('yyyy-MM-dd');
							var overTime = new Date(this.endTime).format('yyyy-MM-dd');　　　　　　　
							export_json_to_excel(tHeader, data, beginTime + '至' + overTime + '读者信息');　　
						})
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			formatJson(filterVal, jsonData) {　　　　　　
				return jsonData.map(v => filterVal.map(j => v[j]))　　
			},
			//修改标签
			editTag(row) {
				this.editTagForm.name = row.name;
				this.editTagForm.code = row.code;
				this.editTagForm.tag = row.tag;
				this.editTagDialog = true;
			},
			confirmEditTag(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							readercode: this.editTagForm.code,
							RFIDTag: this.editTagForm.tag,
							UserId: parseInt(GloabFun.getKeyId())
						}
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/Reader/Update/RFIDTag', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.searchDatas();
								this.editTagDialog = false;
								this.$notify({
									title: '成功',
									message: this.$t('message.operationSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					} else {
						return false;
					}
				});
			},
			querySearch(queryString, cb) {
				var restaurants = this.searchReaderHistory;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return(restaurant) => {
					return(restaurant.value.indexOf(queryString.toLowerCase()) === 0);
				};
			},
			handleSelect(item) {},
			//下载excel模板
			downloadExcel() {
				window.location.href = localHost + '/Api/User/File/Download/ExcelFile?uid=' + GloabFun.getUid() + '&token=' + GloabFun.getToken() + '&filetype=1';
			},
			//导入excel表格弹窗查询馆藏地
			getLocationInImportDialog() {
				HttpServer.httpPost.call(this, '/Api/LibraryLocation/GetByUser', {
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.importLocationDatas = response.data.info;
						this.importLocaitionId = this.resetPwdLocationId = this.importLocationDatas[0].LocationKeyId;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//导入excel
			importExcel() {
				//this.getLocationInImportDialog();
				this.importExcelDialog = true;
			},
			uploadComplete(item) {
				this.searchDatas();
				this.$notify({
					title: '成功',
					message: this.$t('message.uploadSuccess'),
					type: 'success',
					duration: 2500
				});
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.searchDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.searchDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;				
			},
			selectType() {
				if(this.value === 0) {
					this.contentHint = '读者姓名 查询';
				} else if(this.value === 1) {
					this.contentHint = '读者证号 查询';
				} else if(this.value === 2) {
					this.contentHint = '读者标签 查询';
				} else {
					this.contentHint = '读者角色 查询';
				}
			},
			changeStartTime() {
				this.startTime = this.startTime.format('yyyy-MM-dd') + ' 00:00:00';
				this.searchDatas();
			},
			changeEndTime() {
				this.endTime = this.endTime.format('yyyy-MM-dd') + ' 23:59:59';
				this.searchDatas();
			},
			//选择排序
			selectRank() {
				this.flag2 ? this.searchDatas() : this.flag2 = true;
			},
			//选择馆藏地
			selectLocation() {
				this.flag ? this.searchDatas() : this.flag = true;
			},
			//去掉读者在借图书数据的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BorrowTime.indexOf("T");
					var index2 = array[i].DueTime.indexOf("T");
					array[i].BorrowTime = array[i].BorrowTime.substring(0, index1) + " " + array[i].BorrowTime.substring(index1 + 1, index1 + 9);
					array[i].DueTime = array[i].DueTime.substring(0, index1) + " " + array[i].DueTime.substring(index1 + 1, index1 + 9);
				}
			},
			//查看当前拥有图书
			showHoldBooks(row) {
				this.holdCount = row.holdcount;
				this.holdLimit = row.holdlimit;
				this.readerCode = row.code;
				this.getHoldBooks();
			},
			getHoldBooks() {
				HttpServer.httpGet.call(this, '/Api/Reader/BookHold?readercode=' + this.readerCode + '&index=' + this.currentHoldPage + '&pageSize=' + this.holdPageSize, function(response) {}, function(response) {
					// console.log(response);
					this.holdBooksDialog = true;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.holdBooksData = response.data.info;
						this.holdTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//切换在借图书信息页码
			handleHoldCurrentChange(val) {
				this.currentHoldPage = val;
				this.getHoldBooks();
			},
			//切换在借图书显示个数
			handleHoldSizeChange(val) {
				this.holdPageSize = val;
				this.getHoldBooks();
			},
			//批量更新读者信息
			multipleUpdateReader() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将更新所选读者信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.showUpdate = true;
						for(var i = 0; i < this.formateSelection().length; i++) {
							for(var j = 0; j < this.tableData.length; j++) {
								if(this.formateSelection()[i] == this.tableData[j].code) {
									this.tableData[j].update = true;
								}
							}
						}
						HttpServer.httpPost.call(this, '/Api/Reader/Update', {
							readercode: this.formateSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								for(var i = 0; i < response.data.info.length; i++) {
									for(var j = 0; j < this.tableData.length; j++) {
										if(this.tableData[j].code == response.data.info[i].readercode) {
											this.tableData[j].update = false;
											if(response.data.info[i].code === 0) {
												this.tableData[j].IsUpdated = '1';
											} else {
												this.tableData[j].IsUpdated = '2';
											}
										}
									}
								}
							} else {
								this.showUpdate = false;
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$confirm('此操作将更新所有读者信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.showUpdate = true;
						for(var i = 0; i < this.formateSelection().length; i++) {
							for(var j = 0; j < this.tableData.length; j++) {
								if(this.formateSelection()[i] == this.tableData[j].code) {
									this.tableData[j].update = true;
								}
							}
						}
						HttpServer.httpPost.call(this, '/Api/Reader/Update', {
							readercode: []
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								for(var i = 0; i < response.data.info.length; i++) {
									for(var j = 0; j < this.tableData.length; j++) {
										if(this.tableData[j].code == response.data.info[i].readercode) {
											this.tableData[j].update = false;
											if(response.data.info[i].code === 0) {
												this.tableData[j].IsUpdated = '1';
											} else {
												this.tableData[j].IsUpdated = '2';
											}
										}
									}
								}
							} else {
								this.showUpdate = false;
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				}
			},
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].code);
				}
				return result;
			},
			formateSelection3() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].keyid);
				}
				return result;
			},
			//批量删除读者信息
			multipleDeleteReader() {
				if(this.formateSelection3().length > 0) {
					this.$confirm('此操作将删除所选读者信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/Reader/Delete', {
							ids: this.formateSelection3()
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.searchDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.searchDatas();
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			resetPassword() {
				this.showresetPwd = true;
			},
			//重置密码
			confirmResetPassword() {
				if(this.resetPwdType === 'location' || this.formateSelection().length > 0) {
					this.$confirm('此操作将重置所选读者的登录密码，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/Reader/ResetPsw', {
							readercode: this.resetPwdType === 'reader'?this.formateSelection():null,
							locationid: this.resetPwdType === 'reader'?null:this.resetPwdLocationId,
							newpsw: this.resetPwd
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: '密码重置成功',
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '请选择批量操作的项',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//查看借阅记录
			borrow(row) {
				row.value = this.value;
				row.searchModel = this.searchModel;
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.selectLocation = this.location;
				this.$emit('changeView', 'borrow', row);
			},
			goLocation(row) {
				row.value = this.value;
				row.searchModel = this.searchModel;
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.selectLocation = this.location;
				this.$emit('changeView', 'location', row);
			},
			//获取注册信息
			getFeatureInfo(row) {
				row.value = this.value;
				row.searchModel = this.searchModel;
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.selectLocation = this.location;
				this.$emit('changeView', 'featureInfo', row);
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.showUpdate = false;
				this.searchDatas();
			},
			//用于查询和刷新
			searchDatas() {
				this.loading = true;
				//保存至搜索历史
				if(this.searchModel != '') {
					this.searchitem.value = this.searchModel;
					if(JSON.stringify(this.searchReaderHistory).indexOf(JSON.stringify(this.searchitem)) == -1) {
						if(this.searchReaderHistory.length === 7) {
							this.searchReaderHistory.splice(0, 1);
						}
						this.searchReaderHistory.push(this.searchitem);
						GloabFun.setSearchReader(JSON.stringify(this.searchReaderHistory));
						this.$nextTick(function() {
							this.searchReaderHistory = JSON.parse(GloabFun.getSearchReader());
						})
					}
				}
				var param = {
					name: this.value === 0 ? this.searchModel : '',
					code: this.value === 1 ? this.searchModel : '',
					tag: this.value === 2 ? this.searchModel : '',
					type: this.value === 3 ? this.searchModel : '',
					queryid: this.location,
					index: this.currentPage,
					pagesize: this.pageSize,
					begin: this.startTime,
					end: this.endTime,
					order: this.rank
				}
				HttpServer.httpPost.call(this, '/Api/Reader/Info', param, function(response) {}, function(response) {
					this.loading = false;
					// console.log('读者信息',response);
					if(response.data.code === 0) {
						response.data.info.forEach(function(item) {
							item.update = false;
							item.IsUpdated = '';
						});
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;

						if(window.localStorage) {
							//保存到localStorage
							localStorage.setItem('readerDatas', JSON.stringify({
								data: this.tableData,
								total: this.totalSize,
								index: this.currentPage,
								size: this.pageSize,
								location: this.location,
								value: this.value,
								searchModel: this.searchModel,
								rank: this.rank,
								startTime: this.startTime,
								endTime: this.endTime
							}));
						} else {
							console.log('This browser does NOT support localStorage')
						}

						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			},
			getDatas() {
				//查询本地是否存在读者的本地缓存数据
				if(localStorage.getItem('readerDatas') != null) {
					this.tableData = JSON.parse(localStorage.getItem('readerDatas')).data;
					this.totalSize = JSON.parse(localStorage.getItem('readerDatas')).total;
					this.currentPage = JSON.parse(localStorage.getItem('readerDatas')).index;
					this.pageSize = JSON.parse(localStorage.getItem('readerDatas')).size;
					this.location = JSON.parse(localStorage.getItem('readerDatas')).location;
					this.value = JSON.parse(localStorage.getItem('readerDatas')).value;
					this.searchModel = JSON.parse(localStorage.getItem('readerDatas')).searchModel;
					this.rank = JSON.parse(localStorage.getItem('readerDatas')).rank;
					this.startTime = JSON.parse(localStorage.getItem('readerDatas')).startTime;
					this.endTime = JSON.parse(localStorage.getItem('readerDatas')).endTime;
				} else {
					this.loading = true;
					var param = {
						name: this.value === 0 ? this.searchModel : '',
						code: this.value === 1 ? this.searchModel : '',
						tag: this.value === 2 ? this.searchModel : '',
						type: this.value === 3 ? this.searchModel : '',
						queryid: this.location,
						index: this.currentPage,
						pagesize: this.pageSize,
						begin: this.startTime,
						end: this.endTime,
						order: this.rank
					}
					HttpServer.httpPost.call(this, '/Api/Reader/Info', param, function(response) {}, function(response) {
						this.loading = false;
						// console.log('读者信息',response);
						if(response.data.code === 0) {
							response.data.info.forEach(function(item) {
								item.update = false;
								item.IsUpdated = '';
							});
							this.tableData = response.data.info;
							this.totalSize = response.data.totalcount;

							if(window.localStorage) {
								//保存到localStorage
								localStorage.setItem('readerDatas', JSON.stringify({
									data: this.tableData,
									total: this.totalSize,
									index: this.currentPage,
									size: this.pageSize,
									location: this.location,
									value: this.value,
									searchModel: this.searchModel,
									rank: this.rank,
									startTime: this.startTime,
									endTime: this.endTime
								}));
							} else {
								console.log('This browser does NOT support localStorage')
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}
			},
			//查询用户绑定的馆藏地
			getLocationDatasByUser() {
				HttpServer.httpPost.call(this, '/Api/LibraryLocation/GetByUser', {
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					// console.log('用户绑定的馆藏地',response)
					if(response.data.code === 0) {
						response.data.info.unshift({
							Name: '全部',
							LocationKeyId: 0
						});
						this.locationDatas = response.data.info;
						if(this.templateObj.code && this.templateObj.code != '') {
							this.location = this.templateObj.selectLocation;
						} else {
							this.location = this.locationDatas[0].LocationKeyId;
						}
						this.getDatas();
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			}
		},
		created() {
			var str = GloabFun.getSearchReader();
			if(str != '') {
				this.searchReaderHistory = JSON.parse(str);
			} else {
				this.searchReaderHistory = [];
			}
			if(this.templateObj.code && this.templateObj.code != '') {
				this.currentPage = this.templateObj.currentPage;
				this.pageSize = this.templateObj.pageSize;
				this.startTime = this.templateObj.startTime;
				this.endTime = this.templateObj.endTime;
				this.searchModel = this.templateObj.searchModel;
				this.value = this.templateObj.value;
			}
			this.getLocationDatasByUser();
			this.getLocationInImportDialog();
		}
	}
</script>
<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.el-date-editor.el-input {
		width: 120px;
	}
	
	.flex-inline {
		display: flex;
		justify-content: space-between;
		.query {
			display: flex;
		}
	}
	
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
	
	.dialog-footer{
		float: right;
	}
</style>